<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script src="${basePath }/js/echarts-2.1.10/build/dist/echarts.js"></script>
<script type="text/javascript">

 var fileLocation ='${basePath }/js/echarts-2.1.10/build/dist';
	require.config({
		paths:{ 
		 'echarts': fileLocation
		}
	});
// 作为入口
require(
    [
         'echarts',
		 'echarts/chart/map'
    ], 
    function (ec) {
        var myChart = ec.init(document.getElementById('graph'));
        var baifenbi = [ 
                        <c:forEach items="${province }" var="data"  varStatus="stat">      
                        {name:'${data.provinces_name}',value:'${data.codeTwo}'}
                        <c:if test="${!stat.last}">,</c:if>
                        </c:forEach>
                      ] ;
        var option = {
   /*  title : {
        text: 'iphone销量',
        subtext: '纯属虚构',
        x:'center'
    }, */
    tooltip : {
    	showContent: true,
    	formatter: function (params) {
    		 var res = params['name']+"<br/>";
           	if(toDecimal(params['value'])=='暂无数据'){
           		
           		res +=  toDecimal(params['value']);
           	}else{           		
    		 res +=  '${orderBy}     '+toDecimal(params.value)+"    ${danwei}" ;
           	}
           	
            for (var i = 0; i < baifenbi.length; i++) { 
                if(params['name'] == baifenbi[i].name &&  baifenbi[i].value!=""){ 
                 	
                	res +=  '   (' + baifenbi[i].value+'%)'; 
                } 
              }     
           	
             return res ;
        },
        trigger: 'item'
    },
   /*  legend: {
        orient: 'vertical',
        x:'left',
        data:['iphone3','iphone4','iphone5']
    }, */
    dataRange: {
    	show:true,
        min: 0,
        max: 50,
        x: 'left',
        y: 'bottom',
        hoverLink:false,
        text:['高','低'],           // 文本，默认为数值文本
        calculable : true,
        color: ['#5eb4f1','#dbfdfe']
    },
    toolbox: {
        show : false,
        orient : 'vertical',
        x: 'right',
        y: 'center',
        feature : {
            mark : {show: false},
            dataView : {show: false, readOnly: false},
            restore : {show: false},
            saveAsImage : {show: false}
        }
    },
 
    
    series : [
              {
                  name: '${orderBy}',
                  type: 'map',
                  mapType: 'china',
                  roam: false,
                  color:'red',
                  selectedMode:'single',
                  itemStyle:{
                      normal:{label:{show:true},color:'#ade1f9'},
                      emphasis:{label:{show:true},color:'#ade1f9'}
                  },
                  data:[
              <c:forEach items="${province }" var="data"  varStatus="stat">      
                      {name: '${data.provinces_name}',value:'${data.count}',itemStyle:{
                          normal:{label:{show:true}},
                          emphasis:{label:{show:true},color:'#bbedb9',}
                      }} 
                      <c:if test="${!stat.last}">,</c:if>
              </c:forEach>
                 ]
              }
          ]
    
    
    
    
};
        myChart.setOption(option);  
    }  
);  


function toDecimal(x) {  
    var f = parseFloat(x);  
    if (isNaN(f)) {
        return '暂无数据';  
    }  
    f = Math.round(x*100)/100;  
    return f;  
}  
</script>
